/**
 * 导出获取验证码
 */

import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Row, Col, message } from 'antd';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { getCode, verificationCode } from '@/services/user';
import { getDifferUserDetails } from '@/utils/authority';
import { mobile } from '@/utils/rule';

const TelCode = ({ visible, handleOk, handleCancel }) => {
  const [second, setSecond] = useState(0);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (visible) {
      form.setFieldsValue({
        mobile: getDifferUserDetails()?.mobile,
        code: null
      });
    }
  }, [visible])

  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 14,
    },
  };

  const [form] = Form.useForm();

  //获取验证码
  const code = async (val) => {
    const res = await getCode({
      ...val,
      type: 9
    })
    if (res.success) {
      message.success('验证码发送成功!');
    }
  }

  //获取验证码点击校验倒数事件
  const verification = async () => {
    form.validateFields(['mobile']).then((value) => {
      let num = 59
      setSecond(59)
      let seconds = setInterval(() => {
        num = num - 1
        setSecond(num)
        if (num === 0) {
          clearInterval(seconds);
          setSecond(0);
        }
      }, 1000)
      code(value)
    })
  }

  //取消弹框点击事件
  const ModalCancel = async () => {
    form.resetFields();
    setSecond(0);
    handleCancel();
  }

  // 验证码提交
  const onOk = () => {
    form.validateFields().then(async (val) => {
      setLoading(true);
      const res = await verificationCode({
        code: val.code,
        phone: val.mobile,
        type: 9
      })
      if (res.success) {
        handleOk(true)
      }
      setLoading(false);
    }).catch(() => {

    })
  }

  return (
    <CommonModal
      title="安全验证"
      visible={visible}
      onOk={onOk}
      onCancel={ModalCancel}
    >
      <div style={{ marginBottom: 24, paddingLeft: '5%' }}>为确保数据安全，该操作需二次验证</div>
      <Form
        {...layout}
        name="export-tel-code"
        form={form}
      >
        <Form.Item
          label="手机号"
          name="mobile"
          rules={[
            {
              required: true,
              message: '请输入正确的手机号!',
            },
            mobile
          ]}
        >
          <Input placeholder="请输入手机号" disabled={true} />
        </Form.Item>

        <Form.Item
          label="手机验证码"
        >
          <Row gutter={8}>
            <Col span={12}>
              <Form.Item
                name="code"
                rules={[
                  {
                    required: true,
                    message: '请输入手机验证码!',
                  },
                ]}
              >
                <Input placeholder="请输入手机验证码" autoComplete='off' />

              </Form.Item>
            </Col>
            <Col span={12}>
              <Button style={{ width: '109px' }} disabled={second} onClick={verification}>{second ? `${second}s` : '获取验证码'}</Button>
            </Col>
          </Row>
        </Form.Item>
      </Form>
      <CommonLoading loading={loading} />
    </CommonModal >
  )
}

export default TelCode;
